<template>
    <view class="container">
        <!-- 顶部图片部分 -->
        <image class="header-image" src="https://agndjhh-1357093041.cos.ap-chongqing.myqcloud.com/2025/06/16/a5e19d68701442358b37e05bc2593944.png" mode="widthFix"></image>

        <!-- 内容区域 -->
        <view class="content">
            <!-- 当前等级信息 -->
            <view class="info-card">
                <view class="upgrade">
                    <view>
                        <view class="welcome-text">欢迎加入 Agn电竞</view>
                        <view class="level-text">您的当前等级：{{myInfo.vipName}}</view>
                    </view>
                    <!-- 立即升级按钮 -->
                    <view class="upgrade-button">
                        <u-button type="primary" size="small" @click="handleUpgrade">立即升级</u-button>
                    </view>
                </view>
            </view>

            <!-- 升级等级选择 -->
            <view class="select-card">
                <view class="title">请选择升级等级：</view>
                <u-radio-group v-model="selectedLevel" placement="column" iconPlacement="right">
                    <view class="radio-item" v-for="(itme,index) in vipList" :key="index">
                        <u-radio :name="itme.businessConfigId" active-color="#ff9900" :label="itme.configName + '  ¥' + itme.remark.split('-')[0] + '元'">
                        </u-radio>
                    </view>
                </u-radio-group>
            </view>

            <!-- 等级特权 -->
            <view class="privilege-card">
                <view class="title">会员 等级特权：</view>
                <!-- 这里可以添加特权列表 -->
                <view class="privilege-item" v-for="(item, index) in vipList.filter((item) => item.businessConfigId == selectedLevel)[0].configValue.split('-')" :key="index">
                    <u-icon name="checkmark-circle" color="#ff9900" size="16"></u-icon>
                    <text class="privilege-text">{{ item }}</text>
                </view>
                <!-- <rich-text :nodes="vipList.filter((item) => item.businessConfigId == selectedLevel)[0].configValue"></rich-text> -->
            </view>
        </view>
    </view>
</template>

<script>
import { getMyInfoApi, getByKeyApi } from "@/sheep/api/index";
import { xcxTopUp } from "@/sheep/utils/wxUtil";
export default {
    data() {
        return {
            selectedLevel: "", // 默认选中代理
            privileges: [
                "专属客服支持",
                "更高佣金比例",
                "优先参与新活动",
                "专属培训课程",
                "营销工具使用权",
            ],
            myInfo: {},
            vipList: [],
        };
    },
    onLoad() {
        this.getMyInfo();
    },
    methods: {
        async getMyInfo() {
            const res = await getMyInfoApi();
            this.myInfo = res.data;
            this.getVipList();
        },
        async getVipList() {
            let res = await getByKeyApi("vip");
            // this.vipList = res.data.filter((item) => item.sortNo > this.myInfo.vip).reverse();
            this.vipList = res.data.reverse();
			this.vipList.shift();
            this.selectedLevel = this.vipList[0].businessConfigId;
        },
        handleUpgrade() {
            let sortNo = this.vipList.filter((item) => item.businessConfigId == this.selectedLevel)[0].sortNo
            if(sortNo <= this.myInfo.vip){
                uni.showToast({
                    title: "您当前会员等级已高于此会员等级",
                    icon: "none",
                });
                return
            }

            const vip = this.vipList.filter((item) => item.businessConfigId == this.selectedLevel)[0];
            const amount = vip.remark.split("-")[0];
            xcxTopUp(amount, vip.businessConfigId, "vip", "vip升级").then((res) => {
                if (res.data) {
                    uni.showToast({
                        title: "升级成功",
                        icon: "none",
                    });
                    this.getMyInfo();
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f2d8b2; // 暖白色背景

    .header-image {
        width: 100%;
        height: auto;
    }

    .content {
        padding: 20rpx 30rpx;

        .info-card,
        .select-card,
        .privilege-card {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
            box-shadow: 0 4rpx 12rpx rgba(255, 153, 0, 0.1);

            .welcome-text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }

            .level-text {
                font-size: 28rpx;
                color: #666;
            }

            .title {
                font-size: 30rpx;
                color: #333;
                margin-bottom: 20rpx;
                font-weight: bold;
            }
        }

        .radio-item {
            margin-bottom: 20rpx;
            font-size: 28rpx;
        }

        .privilege-item {
            display: flex;
            align-items: center;
            margin-bottom: 15rpx;

            .privilege-text {
                font-size: 26rpx;
                color: #666;
                margin-left: 10rpx;
            }
        }
    }
}
.upgrade {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .upgrade-button {
        width: 25%;
    }
}
</style>
